<template>
	<view class="content">
		<!-- 自定义导航小程序以及H5平台出现的代码 -->
		<!-- #ifdef MP || H5 -->
		<view class="top_list" :style="{ height :(navBarHeight) + (statusBarHeight) +'px' }">
			<view :style="{height:statusBarHeight + 'px'}">

			</view>
			<view :style="{height:navBarHeight + 'px', width: menuLeftInfo + 'px'}" class="list_top">
				<view class="list_top_01">
					<view>本地时间：{{time1}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->



		<!-- 仅出现在App平台的代码 -->
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx; width: 100%;">

		</view>
		<!-- #endif -->

		<!-- #ifdef MP || H5 -->

		<view class="bottom_list" :style="{height:'calc(100% - '+((navBarHeight + statusBarHeight) +'px')+')'}">
			<view class="bottom_list_01">
				<view>
					<image src="../../static/酒店.png"></image>
					<view>五星艾特酒店欢迎您</view>
				</view>
			</view>
			<view class="bottom_list_02">
				<div class="home-banner-box">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in swiper_list" key="item">
							<image :src="item.picUrl"></image>
						</swiper-item>
					</swiper>
				</div>
				<div class="homt-banner-box_01">
					<div class="homt-banner-box_01_01">正在疯狂的查询您的订单，请耐心等待......</div>
					<div class="homt-banner-box_01_02">
						<div class="homt-banner-box_01_02_01">
							<div class="homt-banner-box_01_02_01_01">
								在读取中请勿移动身份证
							</div>
							<image class="homt-banner-box_01_02_01_img" src="../../static/身份证正面.png"></image>
							<div class="homt-banner-box_01_02_01_01">
								请按图所示
							</div>
							<div class="homt-banner-box_01_02_01_01">
								【居民身份证】放置在对应位置
							</div>
							<div class="homt-banner-box_01_02_01_01">
								进行订单查询
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="bottom_list_03">
				<div class="bottom_shou">
					<button @click="shou">
						首页
						<span class="span">({{miao}}秒)</span>
					</button>
				</div>
				<div class="bottom_list_03_01">
					<text>某某公司</text>
					<text>版本V1.0 TID：xxx Tel：021-00000000</text>
				</div>

			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="bottom_list">
			<view class="bottom_list_01">
				<view>
					<image src="../../static/酒店.png"></image>
					<view>五星艾特酒店欢迎您</view>
				</view>
			</view>
			<view class="bottom_list_02" style="overflow: hidden;">
				<div style="font-size: 30rpx; text-align: center; width: 92%; margin: auto; margin-top: 10rpx; padding-bottom: 10rpx; border-bottom: 1px dashed;">
					订单信息
				</div>
				<div class="home-banner-box">
					<image class="swiper" src="https://img2.baidu.com/it/u=4253263265,1923884454&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"></image>
				</div>
				<div class="homt-banner-box_01">
					<table>
					  <!-- 表头 -->
					  <tbody>
					    <tr>
					      <td>房型:</td>
					      <td>标准大床房<span>【有窗】【靠江】</span></td>
					    </tr>
					    <tr>
					      <td>套餐:</td>
					      <td>A套餐<span>【含早餐1份】</span></td>
					    </tr>
					    <tr>
					      <td>房号:</td>
					      <td>B301</td>
					    </tr>
						<tr>
						  <td>住店日期:</td>
						  <td>05/10 — 05/12</td>
						</tr>
						<tr>
						  <td>入住天数（天）:</td>
						  <td>2</td>
						</tr>
						<tr>
						  <td>入住人数（人）:</td>
						  <td>1</td>
						</tr>
						<tr>
						  <td>房价（元/日）:</td>
						  <td>200<span>【已支付】</span></td>
						</tr>
						<tr>
						  <td>入住天数（天）:</td>
						  <td>100<span>【未支付】</span></td>
						</tr>
						<tr>
						  <td>房间状态：:</td>
						  <td>未办理入住登记</td>
						</tr>
					  </tbody>
					</table>
					<div class="ban">
						<div style="text-align: center; font-size: 25rpx; margin-top: 20rpx;">
							请选择入住
						</div>
						<div style="width: 70%; height: 40rpx; margin: auto; margin-top: 40rpx;">
							<button style="width: 120rpx; height: 40rpx; background-color: #990033; color: #fff;float: left; font-size: 16rpx;">退出</button>
							<button style="width: 120rpx; height: 40rpx; background-color: #990033; color: #fff;float: right; font-size: 16rpx;">入住</button>
						</div>
					</div>
				</div>
			</view>
			<view class="bottom_list_03">
				<div class="bottom_shou">
					<button @click="shou">
						首页
						<span class="span">({{miao}}秒)</span>
					</button>
				</div>
				<div class="bottom_list_03_01">
					<text>某某公司</text>
					<text>版本V1.0 TID：xxx Tel：021-00000000</text>
				</div>
			</view>
		</view>
		<!-- <van-toast id="van-toast" /> -->
		<!-- #endif -->
	</view>
</template>

<script>
	// import Toast from '@wxcomponents/dist/toast/toast';
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏的高度
				windowWidth: 0, //可视区域的宽
				menuButtonInfo: 0, //胶囊的位置
				navBarHeight: 0, //顶部整体高度
				menuLeftInfo: 0, //胶囊左边的距离
				time1: "",
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				miao: 60,
				FormData: {},
				str: '',
			}
		},
		onLoad() {

		},
		created() {
			// #ifdef  MP || H5
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
					this.windowWidth = res.windowWidth
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					this.navBarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top -
						this.statusBarHeight)
					this.menuLeftInfo = menuButtonInfo.left
				}
			})
			// #endif
			this.time_data()
			this.tiao_show()
		},
		methods: {
			// 实时获取当前时间
			time_data() {
				setInterval(() => {
					let myDate = new Date()
					let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
					let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					let myToday = myDate.getDate(); //获取当前日(1-31)
					myMonth = myMonth > 9 ? myMonth : '0' + myMonth
					myToday = myToday > 9 ? myToday : '0' + myToday
					let hours = myDate.getHours();
					let minutes = myDate.getMinutes();
					let seconds = myDate.getSeconds();
					hours = hours > 9 ? hours : '0' + hours
					minutes = minutes > 9 ? minutes : '0' + minutes
					seconds = seconds > 9 ? seconds : '0' + seconds
					let nowDate = `${myYear}-${myMonth}-${myToday} ${hours}:${minutes}:${seconds}`
					this.time1 = nowDate
				}, 1000)
			},
			// 30秒后跳转到首页
			tiao_show() {
				this.contime = setInterval(() => {
					this.miao--

				}, 1000)
			},
			shou() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	.swiper{
		height: 90% !important;
		width: 90% !important;
		margin: auto;
	}
	table {
	  width: 100%; /* 设为100%占据父级容器 */
	  border-collapse: collapse; /* 合并相邻的边框为一条线 */
	}
	
	th, td {
	  padding: 12rpx 8rpx; /* 设置内边距 */
	  border: 1px solid #f2f2f2; /* 边框样式 */
	  font-size: 15rpx;
	}
	th,td>span{
		color: #990033;
	}
	
	th {
	  background-color: #f2f2f2; /* 表头背景色 */
	}

	.content {
		width: 100%;
		height: 100%;

		.top_list {
			background-color: #823835;

			.list_top {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ddd38c;

				.list_top_01 {
					font-size: 25rpx;
					width: 100%;

					view {
						margin-left: 40rpx;
					}
				}
			}
		}
	}

	.bottom_list {
		width: 100%;
		height: 90%;
		overflow: auto;
		background-color: #f3f6f6;

		.bottom_list_01 {
			width: 100%;
			height: 150rpx;
			margin-top: 50rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border: 8rpx solid transparent;
				border-radius: 50%;
				padding: 10rpx;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(to right, #ffffff, #fff), linear-gradient(to right, #cd9e29, #8aa484);
			}

			view {
				text-align: center;
				font-size: 28rpx;
				color: #985054;
			}
		}

		.bottom_list_02 {
			width: 75%;
			height: 70%;
			margin: auto;
			margin-top: 40rpx;
			background-color: #fff;
			// background-color: #72312e;
			border: 5rpx solid #c9ba83;

			// border:5rpx solid #c9ba83;
			.home-banner-box {
				width: 100%;
				height: 30%;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.homt-banner-box_01 {
				width: 90%;
				height: 62%;
				margin: auto;
				position: relative;
			}
		}

		.bottom_list_03 {
			position: absolute;
			bottom: 0;
			height: 160rpx;
			width: 100%;
			color: #fff;
			background-color: black;

			.bottom_shou {
				height: 50%;
				width: 100%;
				background-color: #f3f6f6;
				position: relative;

				button {
					width: 220rpx;
					height: 70rpx;
					position: absolute;
					top: 0;
					right: 50rpx;
					border-radius: 20rpx;
					background-color: #72312e;
					color: #fff;
					text-align: center;
					font-size: 28rpx;

					.span {
						color: #ffff66;
					}
				}

			}

			.bottom_list_03_01 {
				height: 50%;
				width: 90%;
				margin: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
			}
		}
		.ban{
			width: 100%;
			height: 180rpx;
			background-color: #fff;
			box-shadow: 1px 1px 1px 1px #b7b7b7;
			position: absolute;
			bottom: 0;
		}
	}
</style>
